<template>
  <div class="box">
    <div class="zan" @click="zanFn">
      <img
        :src="zanClicked == 1 ? zanredImg : zangrayImg"
        :class="[zanClicked ? 'animate' : 'noanimate']"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zangrayImg: require("@/assets/imgs/gray.png"),
      zanredImg: require("@/assets/imgs/red.png"),
      zanClicked: 0,
    };
  },
  methods: {
    zanFn() {
      if (!this.zanClicked) {
        //0
        this.zanClicked = 1;
      } else {
        this.zanClicked = 0;
      }
    },
  },
};
</script>
<style scoped lang ='less'>
.box {
  width: 100%;
  margin-top: 1rem;
  position: relative;
}
.zan {
  width: 7.5rem;
  height: 5rem;
  margin: 0 auto;
  img {
    background-size: 100%;
    width: 0.8rem;
    height: 0.8rem;
    margin: 0 auto;
    display: block;
  }
}
.animate {
  animation: scaleDraw 1s ease-in-out;
  /* animation: Clickfd 1s ease-in-out; */
}
.noanimate {
  animation: noscaleDraw 0.5s ease-in-out;
}
/* 点赞动画效果 */
@keyframes scaleDraw {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}
@keyframes noscaleDraw {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8);
  }
  75% {
    transform: scale(1.1);
  }
}
/* 效果2 */
@keyframes Clickfd {
  0% {
    top: 0;
  }
  10% {
    top: -3px;
  }
  20% {
    top: -6px;
  }
  30% {
    top: -9px;
  }
  40% {
    top: -12px;
    transform: rotate(6deg);
  }
  50% {
    top: -15px;
    transform: rotate(12deg);
  }
  60% {
    top: -18px;
    transform: rotate(6deg);
  }
  70% {
    top: -21px;
    transform: rotate(0deg);
  }
  80% {
    top: -24px;
    transform: rotate(-6deg);
  }
  90% {
    top: -27px;
    transform: rotate(-12deg);
  }
  100% {
    top: -30px;
    transform: rotate(-6deg);
  }
}
</style>
